<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <ui:composition template="/restricted/template.xhtml">

        <ui:define name="title">MeteoCal - Event Management</ui:define>
        <ui:define name="titlePag">event management</ui:define>
        <ui:define name="content">
            <div class="event">
                <h:form> 
                    <div id="logForm" class="eventoForm">
                        <p:messages/>

                        <div class="tabella1">
                            <p:inputText styleClass="eventInput" size="69" id="eventName" maxlength="23" value="#{createEventBean.eventName}" required="true" 
                                         placeholder="Event name" label="Event Name"/> 
                        </div>

                        <div class="tabella1">
                            <p:inputText styleClass="calendar" style="float:left" id="eventPlace" value="#{createEventBean.eventPlace}" required="true" 
                                         placeholder="Event place" label="Event Place"/> 
                        </div>

                        <div class="tabella8"> 
                            <h:selectOneRadio styleClass="environment" value="#{createEventBean.typeIo}" style="float:right"
                                              id="eventEnvironment" required="true" label="Event Environment">
                                <f:convertNumber integerOnly="true" />
                                <f:selectItem itemLabel=" Outdoor" itemValue="1" />
                                <f:selectItem itemLabel=" Indoor" itemValue="0" />
                            </h:selectOneRadio>
                        </div>

                        <div class="tabella1"><br/>
                            <p:inputTextarea styleClass="eventInput" rows="3" id="description" 
                                             value="#{createEventBean.description}" placeholder="Event description*"/> 
                        </div>


                        <div class="tabella6">
                            <div class="tabella2">
                                <p:calendar maxlength="31" id="dateStart" placeholder="Start Date" value="#{createEventBean.dateStart}" navigator="true" yearRange="-100:+1" mindate="#{createEventBean.today}"
                                            required="true"  pattern="dd/MM/yyyy HH:mm" label="Start Date" converterMessage="Inserire una data di partenza nel formato dd/MM/yyyy (es.: 05/01/2014)" >
                                    <p:ajax event="dateSelect" update="endStart" />
                                </p:calendar>

                            </div>


                        </div>

                        <div class="tabella7">
                            <div class="tabella3">
                                <p:calendar maxlength="31"  id="endStart" placeholder="Finish Date*" value="#{createEventBean.dateEnd}" navigator="true" yearRange="-100:+1" mindate="#{createEventBean.dateStart}"
                                            label="End Date" pattern="dd/MM/yyyy HH:mm" converterMessage="Inserire una data di partenza nel formato dd/MM/yyyy (es.: 05/01/2014)" /> 
                            </div>

                        </div>
                        <div class='tabella1'><br/><br/><br/>
                            <h:outputText styleClass="environment" value="Invite friends:*" />
                            <p:autoComplete 
                                id="themes" 
                                multiple="true" 
                                value="#{createEventBean.selectedUser}" 
                                completeMethod="#{createEventBean.completeUser}"
                                var="user" 
                                itemLabel="#{user.nickname}" 
                                itemValue="#{user}" 
                                converter="userConverter" 
                                forceSelection="true">

                                <p:column>
                                    <h:outputText value="#{user.name} #{user.surname} - #{user.nickname}" />
                                </p:column>
                                
                            </p:autoComplete>
                            <h:selectBooleanCheckbox value="#{createEventBean.typePp}" /> <h:outputText styleClass="environment" value="Public" /><br/>
                            <h:outputText styleClass="environment2" value=" *optional elements" />

                        </div>
                        <h:commandButton styleClass="createButton" value="Create"  action="#{createEventBean.createEvent()}"  />

                    </div>

                </h:form>

            </div>

        </ui:define>

    </ui:composition>
</html>